<template>
  <div>
    <div
      style="
        margin: -20px;
        margin-right: 0;
        padding: 20px;
        height: 100%;
        display: grid;
        gap: 24px;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      "
    >
      <div
        v-for="(item, key) in contentList"
        :key="key"
        class="card-content"
        @click="handleContent(item, key)"
      >
        <el-card>
          <div slot="header">
            <div style="display: flex; justify-content: space-between">
              <span>{{ item.nick_name }} - {{ item.phone }}</span>
              <span
                @click.stop="remote(key)"
                style="color: red; cursor: pointer"
                >删除</span
              >
            </div>
          </div>
          <!-- <div>{{ filterAnswerLast(item.chat) }}</div> -->
          <!-- <div
            style="
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              max-width: 200px;
              float: right;
              text-align: right;
              margin: 24px 0;
            "
            v-html="
              item.chat[item.chat.length - 1].type === 'answer'
                ? item.chat[item.chat.length - 1].content
                : '<div style=\'color: red;\'>尚未回复</div>'
            "
          ></div> -->
        </el-card>
      </div>
    </div>
    <el-empty
      description="暂无数据"
      v-if="Object.keys(contentList).length === 0"
    ></el-empty>
  </div>
</template>

<script>
import BreadCrumbs from "@/components/BreadCrumbs";

export default {
  data() {
    return {
      contentList: [],
    };
  },
  components: {
    BreadCrumbs,
  },
  created() {
    this.getConsultationList();
  },
  methods: {
    async remote(key) {
      const { code, data, msg } = await this.$http.delete(
        "/api/consultation/" + key
      );
      if (code) return this.$message.error(msg);
      this.$message.success("删除成功");
      this.getConsultationList();
    },
    // filterAnswerLast(chat) {
    //   const res = chat.filter((i) => i.type === "question");
    //   return res[res.length - 1].content;
    // },
    async getConsultationList() {
      const { code, data, msg } = await this.$http.get("/diet/admin/message");
      if (code) return this.$message.error(msg);
      this.contentList = data;
    },
    handleContent(item, key) {
      this.$router.push({
        path: "/consultation/" + key,
        query: {
          phone: item.phone,
          name: item.nick_name,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.card-content {
  cursor: pointer;
  height: 100%;
  height: 150px;
  transform: translateY(0);
  transition: all 0.5s;
  :hover {
    transition: all 0.5s;
    transform: translateY(-5px);
  }
}
.el-card {
  height: 100%;

  :hover {
    transition: none;
    transform: translateY(0);
  }
}
</style>
